```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域资源共享(CORS)完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            position: relative;
        }
        .solution-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 4rem;
            padding-right: 0.5rem;
            margin-top: 0.3rem;
            font-weight: bold;
            color: #667eea;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">跨域资源共享(CORS)完全指南</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto opacity-90">理解现代Web开发中的跨域问题与解决方案</p>
            <div class="flex justify-center space-x-4">
                <a href="#what-is-cors" class="bg-white text-indigo-700 px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition duration-300">了解更多</a>
                <a href="#solutions" class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition duration-300">解决方案</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 md:px-0 py-12">
        <!-- What is CORS Section -->
        <section id="what-is-cors" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800 font-serif">什么是跨域资源共享(CORS)</h2>
            </div>
            
            <article class="prose prose-lg max-w-none">
                <p class="drop-cap">跨域资源共享(CORS)是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个origin(域)上的Web应用被准许访问来自不同源服务器上的指定资源。当一个资源从与该资源本身所在服务器的不同域、协议或端口请求资源时，资源会发起一个跨域HTTP请求。</p>
                
                <p>在<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS" class="text-indigo-600 hover:text-indigo-800 font-medium">MDN Web文档</a>中，CORS被定义为一种基于HTTP头的机制，它允许服务器指示除了它自己以外的其他origin(域、协议或端口)，浏览器应该允许加载这些资源。</p>
                
                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 my-6 rounded">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
                        <div>
                            <h4 class="font-bold text-gray-800">为什么需要CORS？</h4>
                            <p class="text-gray-700">出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头。</p>
                        </div>
                    </div>
                </